<template>
	<view class="content">
		<u-navbar title="个人中心" back-icon-color="#000" title-color="#000" :title-bold="true" :immersive="false" :border-bottom="false" :background="{background:'none'}" :is-back="false"></u-navbar>
		<view class="card">
			<block v-if="!isLogin()">
				<view class="title">
					<text>欢迎回来</text>
				</view>
				<view class="subtitle">
					<text>吉泰酒店集团在线订房——为您提供有温度的服务</text>
				</view>
				<view class="m-btn" @click="loginFun">
					<text>立即登录</text>
				</view>
			</block>
			<block v-else>
				<view class="user">
					<view class="user-image">
						<image v-if="user_info.user_image" :src="user_info.user_image" mode="aspectFill"></image>
						<image v-else src="@/static/center/center-logo.png" mode="aspectFill"></image>
					</view>
					<view class="user-content" @click="to_link('/pages2/userinfo/userinfo')">
						<view class="user-name">
							<view class="u-line-1" style="max-width: 260rpx;">
								<text>{{user_info.name}}</text>
							</view>
							<view class="user-edit">
								<image src="@/static/center/edit.png" mode=""></image>
							</view>
						</view>
						<view class="user-phone">
							<text>{{user_info.username}}</text>
						</view>
						
						<view class="user-right" @click.stop="to_link('/pages2/hotel-member/hotel-member')">
							<view class="user-tip">
								<text>{{user_info.level}}</text>
							</view>
							<image src="@/static/index/icon-right.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="tab">
					<view class="tab-item" @click="to_link('/pages2/points-detail/points-detail')">
						<view class="tab-item-image">
							<image src="@/static/center/ico_balance.png" mode=""></image>
						</view>
						<view class="tab-item-content">
							<view class="tab-item-font1">
								<text>{{user_info.jifen || 0}}</text>
							</view>
							<view class="tab-item-font2">
								<text>我的积分</text>
							</view>
						</view>
					</view>
					<view class="tab-line">
						
					</view>
					<view class="tab-item" @click="to_link('/pages2/coupon/coupon')">
						<view class="tab-item-image">
							<image src="@/static/center/ico_coupon.png" mode=""></image>
						</view>
						<view class="tab-item-content">
							<view class="tab-item-font1">
								<text>{{user_info.yhq_num || 0}}</text>
							</view>
							<view class="tab-item-font2">
								<text>我的优惠券</text>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		
		
		<view class="box">
			<view class="box-title">
				<text>酒店订单</text>
				<view class="box-title-right" @click="to_link('/pages2/hotel-order/hotel-order?scene=0')">
					<text>全部</text>
					<image src="@/static/index/icon-right.png" mode=""></image>
				</view>
			</view>
			<view class="list">
				<view class="item" @click="to_link('/pages2/hotel-order/hotel-order?scene=1')">
					<image src="@/static/center/menu-icon1.png" mode=""></image>
					<text>待支付</text>
				</view>
				<view class="item" @click="to_link('/pages2/hotel-order/hotel-order?scene=2')">
					<image src="@/static/center/menu-icon2.png" mode=""></image>
					<text>待入住</text>
				</view>
				<view class="item" @click="to_link('/pages2/hotel-order/hotel-order?scene=3')">
					<image src="@/static/center/menu-icon3.png" mode=""></image>
					<text>入住中</text>
				</view>
				<view class="item" @click="to_link('/pages2/hotel-order/hotel-order?scene=4')">
					<image src="@/static/center/menu-icon4.png" mode=""></image>
					<text>已完成</text>
				</view>
			</view>
			<view class="order" v-if="orderInfo">
				<view class="order-view" @click="to_link('/pages/order/detail?id='+orderInfo.id)">
					<view class="order-view-top">
						<view class="order-view-top__left">
							<text>{{orderInfo.hotal}}</text>
						</view>
						<view class="order-view-top__right">
							<text>待支付</text>
							<image src="@/static/index/icon-right.png" mode=""></image>
						</view>
					</view>
					<view class="order-view-bottom">
						<view class="order-view-bottom__left u-line-1">
							<text>{{get_date('MM月DD日',orderInfo.startTime)}} 至 {{get_date('MM月DD日',orderInfo.endTime)}} {{orderInfo.night_num}}晚 {{orderInfo.home.title}} {{orderInfo.num}}间</text>
						</view>
						<view class="order-view-bottom__right">
							<view class="order-view-bottom__time">
								<u-count-down :timestamp="orderInfo.second || 0" :show-days="false" :show-hours="false" :font-size="22" :separator-size	="22" separator-color="#DE2C38" color="#DE2C38"></u-count-down>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="box">
			<view class="box-title">
				<text>积分订单</text>
				<view class="box-title-right"  @click="to_link('/pages2/shop-order/shop-order')">
					<text>全部</text>
					<image src="@/static/index/icon-right.png" mode=""></image>
				</view>
			</view>
			<view class="list">
				<view class="item" style="flex: 1;" @click="to_link('/pages2/shop-order/shop-order?type=2')">
					<image src="@/static/center/menu-icon5.png" mode=""></image>
					<text>待发货</text>
				</view>
				<view class="item"  style="flex: 1;" @click="to_link('/pages2/shop-order/shop-order?type=3')">
					<image src="@/static/center/menu-icon6.png" mode=""></image>
					<text>待收货</text>
				</view>
				<view class="item" style="flex: 1;" @click="to_link('/pages2/shop-order/shop-order?type=4')">
					<image src="@/static/center/menu-icon7.png" mode=""></image>
					<text>已完成</text>
				</view>
			</view>
		</view>
		
		<view class="box">
			<view class="box-title">
				<text>常用菜单</text>
			</view>
			<view class="list">
				<view class="item" @click="to_link('/pages2/coupon-list/coupon-list')">
					<image src="@/static/center/menu-icon8.png" mode=""></image>
					<text>积分兑券</text>
				</view>
				<view class="item" @click="to_link('/pages2/shop-address/shop-address')">
					<image src="@/static/center/menu-icon9.png" mode=""></image>
					<text>收货地址</text>
				</view>
				<!-- <view class="item" @click="to_link('/pages2/hotel-see-record/hotel-see-record')">
					<image src="@/static/center/menu-icon10.png" mode=""></image>
					<text>最近浏览</text>
				</view> -->
				<view class="item" @click="to_link('/pages2/hotel-my-comment/hotel-my-comment')">
					<image src="@/static/center/menu-icon11.png" mode=""></image>
					<text>酒店点评</text>
				</view>
				<view class="item" @click="to_link('/pages2/hotel-contact/hotel-contact')">
					<image src="@/static/center/menu-icon12.png" mode=""></image>
					<text>常住联系人</text>
				</view>
				<view class="item" @click="to_link('/pages2/hotel-invoice/hotel-invoice')">
					<image src="@/static/center/menu-icon13.png" mode=""></image>
					<text>发票管理</text>
				</view>
				<!-- <view class="item" @click="to_link('/pages2/feedback/feedback')">
					<image src="@/static/center/menu-icon14.png" mode=""></image>
					<text>意见反馈</text>
				</view> -->
				<view class="item" @click="showKefu = true">
					<image src="@/static/center/menu-icon4.png" mode=""></image>
					<text>联系客服</text>
				</view>
				<view class="item" @click="yuangong">
					<image src="@/static/center/menu-icon10.png" mode=""></image>
					<text>员工端</text>
				</view>
			</view>
		</view>
		
		<u-popup v-model="showKefu" mode="center" borderRadius="12">
			<view class="m-kefu">
				<view class="m-kefu-title">
					<text>联系客服</text>
					<view class="m-kefu-close">
						<u-icon @click="showKefu = false" name="close"></u-icon>
					</view>
				</view>
				<view class="m-kefu-content">
					<view class="m-kefu-font1">
						<text class="m-kefu-font2">客服电话</text>
						<text>（服务时间09:00-20:30）</text>
					</view>
					<view class="m-keufu-mobile" @click="callPhoneFun">
						<image src="/static/center/m-kefu-icon.png" mode=""></image>
						<text>{{kefu}}</text>
					</view>
				</view>
			</view>
		</u-popup>
		<m-login></m-login>
	</view>
</template>

<script>
	import {to_switch} from "@/common/function/system_fun.js"
	import {get_userInfo} from "@/common/function/api_fun.js"
	import {get_date,get_timestamp} from "@/common/function/tools.js"
	export default {
		data() {
			return {
				user_info:{},
				orderInfo:null,
				showKefu:false,
				kefu:'',
			}
		},
		computed:{
			getCountComputed(){
				return (item)=>{
					let start = get_timestamp(item.startTime)
					let end = get_timestamp(item.endTime)
					let count = (end - start) / 24/60/60
					return count
				}
			}
		},
		onLoad() {
			uni.$on('loginSuccess',()=>{
				get_userInfo((data)=>{
					this.user_info = data
				})
			})
		},
		onShow() {
			if(this.isLogin()){
				get_userInfo((data)=>{
					this.user_info = data
				})
				this.getOrderFun()
			}
			this.getKefuFun()
		},
		methods: {
			to_switch,
			get_date,
			getKefuFun(){
				this.$http.getJson('index_kefu').then(res=>{
					if(res.code == 1){
						this.kefu = res.data.phone
					}
				})
			},
			callPhoneFun(){
				uni.makePhoneCall({
					phoneNumber:String(this.kefu)
				})
			},
			yuangong(){
				this.to_link('/pages3/center/center')
				// if(this.yuangongLogin){
				// 	this.to_link('/pages3/center/center')
				// }else{
				// 	this.to_link('/pages3/login/login')
				// }
			},
			loginFun(){
				uni.$emit('login')
			},
			getOrderFun(){
				this.$http.getJson('hotal_orderList',{page:1,pagenum:1,scene:1}).then(res=>{
					if(res.code == 1){
						this.orderInfo = res.data && res.data.length > 0 ? res.data[0] : null
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #f6f6f6;
	}
	.content{
		min-height: 100vh;
		background-image: url('@/static/center/center-bg.png');
		background-repeat: no-repeat;
		background-size: 750rpx 520rpx;
		padding-bottom: 30rpx;
	}
	
	.card{
		width: 670rpx;
		height: 360rpx;
		background: url("@/static/center/center-view-bg.png");
		background-repeat: no-repeat;
		background-size: 750rpx 360rpx;
		border-radius: 20rpx;
		margin: 50rpx auto 0;
		.title{
			font-size: 48rpx;
			color: #34302D;
			font-weight: 800;
			padding: 48rpx 0 0 40rpx;
		}
		.subtitle{
			font-size: 24rpx;
			color: #75706A;
			margin-left: 40rpx;
			margin-top: 10rpx;
		}
		.m-btn{
			width: 360rpx;
			height: 90rpx;
			background: #D3A358;
			border-radius: 45rpx 45rpx 45rpx 45rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			color: #FFFFFF;
			font-weight: 600;
			margin: 50rpx auto 0;
		}
		
		
		
		.user{
			display: flex;
			padding: 48rpx 20rpx 0 32rpx;
			.user-image{
				width: 110rpx;
				height: 110rpx;
				flex-shrink: 0;
				image{
					width: 100%;
					height: 100%;
					border-radius: 100%;
				}
			}
			.user-content{
				position: relative;
				flex: 1;
				padding-left: 30rpx;
				.user-right{
					position: absolute;
					top: 0;
					right: 0;
					display: flex;
					align-items: center;
					.user-tip{
						line-height: 36rpx;
						height: 36rpx;
						padding: 0 16rpx;
						background: linear-gradient(90deg, #E4E5E8 0%, #EDF0F4 100%);
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						font-size: 20rpx;
						color: #34302D;
					}
					image{
						width: 30rpx;
						height: 30rpx;
					}
				}
				.user-name{
					display: flex;
					align-items: center;
					font-size: 40rpx;
					color: #34302D;
					font-weight: 800;
					line-height: 56rpx;
					max-width: 360rpx;
					.user-edit{
						margin-left: 20rpx;
						image{
							width: 30rpx;
							height: 30rpx;
						}
					}
				}
				.user-phone{
					font-size: 24rpx;
					color: #75706A;
					margin-top: 10rpx;
				}
			}
		}
		.tab{
			display: flex;
			align-items: center;
			padding-top: 60rpx;
			.tab-line{
				width: 1px;
				height: 50rpx;
				background: #D3CECA;
			}
			.tab-item{
				display: flex;
				align-items: center;
				padding-left: 32rpx;
				flex: 1;
				.tab-item-image{
					width: 60rpx;
					height: 60rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.tab-item-content{
					padding-left: 24rpx;
					.tab-item-font1{
						font-size: 48rpx;
						color: #34302D;
						line-height: 64rpx;
					}
					.tab-item-font2{
						font-size: 24rpx;
						color: #9A958F;
					}
				}
			}
		}
	}
	
	.box{
		width: 700rpx;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		margin-left: 25rpx;
		margin-top: 20rpx;
		.box-title{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 32rpx 30rpx 24rpx;
			font-size: 30rpx;
			color: #34302D;
			font-weight: 800;
			.box-title-right{
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #7D7D7D;
				font-weight: 400;
				image{
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
		
		.list{
			display: flex;
			flex-wrap: wrap;
			.item{
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				width: 175rpx;
				height: 190rpx;
				font-size: 24rpx;
				color: #75706A;
				image{
					width: 56rpx;
					height: 56rpx;
					margin-bottom: 20rpx;
				}
			}
		}
		
	}
	
	.order{
		padding: 0 30rpx 30rpx;
		.order-view{
			background: #FDF6EE;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 20rpx;
			.order-view-top{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.order-view-top__left{
					font-size: 28rpx;
					color: #222222;
					font-weight: 800;
					line-height: 40rpx;
					width: 470rpx;
				}
				.order-view-top__right{
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #7D7D7D;
					image{
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
			.order-view-bottom{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 5rpx;
				.order-view-bottom__left{
					font-size: 24rpx;
					color: #75706A;
				}
				.order-view-bottom__right{
					.order-view-bottom__time{
						height: 34rpx;
						padding:0 15rpx ;
						background: #FFFFFF;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						line-height: 34rpx;
						font-size: 24rpx;
						color: #DE2C38;
					}
				}
			}
		}
	}
	
	.m-kefu{
		width: 686rpx;
		.m-kefu-title{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;
			padding: 0 25rpx;
			background: #D3A358;
			font-size: 36rpx;
			color: #fff;
			font-weight: 800;
		}
		.m-kefu-content{
			padding: 50rpx 60rpx;
		}
		.m-kefu-font1{
			font-size: 26rpx;
			color: #666666;
		}
		.m-kefu-font2{
			font-size: 26rpx;
			color: #000;
			font-weight: 800;
		}
		.m-keufu-mobile{
			display: flex;
			align-items: center;
			font-size: 38rpx;
			color: #000;
			font-weight: 800;
			margin-top: 30rpx;
			image{
				width: 37rpx;
				height: 37rpx;
				margin-right: 30rpx;
			}
		}
	}
</style>
